<template>
  <div class="work-experience-form">
    <div class="form-header">
      <h3>工作经历</h3>
      <el-button type="primary" @click="addExperience">添加经历</el-button>
    </div>

    <el-empty v-if="experiences.length === 0" description="暂无工作经历" />

    <div class="experience-container">
      <el-collapse v-model="activeCollapse" accordion>
        <el-collapse-item
            v-for="(exp, index) in experiences"
            :key="index"
            :name="index"
        >
          <template #title>
            <span class="collapse-title">{{ exp.company || '新工作经历' }}</span>
            <el-button
                type="danger"
                size="small"
                @click.stop="removeExperience(index)"
            >
              删除
            </el-button>
          </template>

          <el-form :model="exp" label-width="100px" label-position="top">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="公司名称" required>
                  <el-input v-model="exp.company" placeholder="请输入公司名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位" required>
                  <el-input v-model="exp.position" placeholder="请输入职位" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="开始时间" required>
                  <el-date-picker
                      v-model="exp.startDate"
                      type="month"
                      placeholder="选择月份"
                      value-format="YYYY-MM"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间" required>
                  <el-date-picker
                      v-model="exp.endDate"
                      type="month"
                      placeholder="选择月份"
                      value-format="YYYY-MM"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="工作描述">
              <el-input
                  v-model="exp.description"
                  type="textarea"
                  :rows="4"
                  placeholder="请描述工作内容和成果"
              />
            </el-form-item>

            <el-form-item label="工作证明">
              <el-upload
                  action="/api/upload"
                  :on-success="(res) => exp.certificate = res.url"
                  :limit="1"
              >
                <el-button type="primary">上传证明文件</el-button>
                <template #tip>
                  <div class="el-upload__tip">支持PDF、JPG、PNG格式，不超过5MB</div>
                </template>
              </el-upload>
              <el-link
                  v-if="exp.certificate"
                  :href="exp.certificate"
                  target="_blank"
                  type="primary"
              >
                查看已上传文件
              </el-link>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  experiences: any[]
}>()

const emit = defineEmits(['update:experiences'])

const activeCollapse = ref(0)

// 添加工作经历
const addExperience = () => {
  const newExp = {
    company: '',
    position: '',
    startDate: '',
    endDate: '',
    description: '',
    certificate: ''
  }
  emit('update:experiences', [...props.experiences, newExp])
  activeCollapse.value = props.experiences.length
}

// 删除工作经历
const removeExperience = (index: number) => {
  const newExps = [...props.experiences]
  newExps.splice(index, 1)
  emit('update:experiences', newExps)
}
</script>

<style scoped>
/*.work-experience-form {
  padding: 0 20px;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.collapse-title {
  margin-right: 15px;
}*/

.work-experience-form {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保填充父容器高度 */
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0; /* 防止头部被压缩 */
}

/* 新增的滚动容器样式 */
.experience-container {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 垂直滚动 */
  max-height: 500px; /* 设置最大高度，可根据需要调整 */
  padding-right: 8px; /* 为滚动条留出空间 */
}

/* 滚动条美化 */
.experience-container::-webkit-scrollbar {
  width: 6px;
}

.experience-container::-webkit-scrollbar-thumb {
  background-color: var(--el-color-primary-light-5);
  border-radius: 3px;
}

.experience-container::-webkit-scrollbar-track {
  background-color: var(--el-border-color-lighter);
}
</style>